import 'package:flutter/material.dart';
import 'package:getx/common/utils/screen_adapter_util.dart';

class AppBottomNavigation extends StatefulWidget {
  const AppBottomNavigation(
      {super.key, required this.currentIndex, required this.onTapped});

  final int currentIndex;
  final void Function(int) onTapped;

  @override
  State<AppBottomNavigation> createState() => _AppBottomNavigation();
}

class _AppBottomNavigation extends State<AppBottomNavigation> {
  int msg_num = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      // notchMargin: 8,
      // color: Colors.white,
      // surfaceTintColor: Colors.transparent,
      height: 54.rpx,
      elevation: 0,
      padding: EdgeInsets.symmetric(horizontal: 6.rpx),
      // shape: const CircularNotchedRectangle(),
      child: Row(
        // mainAxisAlignment: MainAxisAlignment.spaceAround,
        // crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: _NavItem(
              isSelected: widget.currentIndex == 0,
              label: '首页',
              icon: Image.asset(
                'assets/images/ic-home-h.png',
                width: 24.rpx,
                height: 24.rpx,
              ),
              selectedIcon: Image.asset(
                'assets/images/ic-home-n.png',
                width: 24.rpx,
                height: 24.rpx,
              ),
              onTap: () {
                widget.onTapped(0);
              },
            ),
          ),
          Expanded(
            child: _NavItem(
              isSelected: widget.currentIndex == 1,
              label: '订单',
              icon: Image.asset(
                'assets/images/ic-order-h.png',
                width: 24.rpx,
                height: 24.rpx,
              ),
              selectedIcon: Image.asset(
                'assets/images/ic-order-n.png',
                width: 24.rpx,
                height: 24.rpx,
              ),
              onTap: () {
                widget.onTapped(1);
              },
            ),
          ),
          Expanded(
            child: _NavItem(
              isSelected: widget.currentIndex == 2,
              label: '我的',
              icon: Image.asset(
                'assets/images/ic-me-h.png',
                width: 24.rpx,
                height: 24.rpx,
              ),
              selectedIcon: Image.asset(
                'assets/images/ic-me-n.png',
                width: 24.rpx,
                height: 24.rpx,
              ),
              onTap: () {
                widget.onTapped(2);
              },
            ),
          ),
        ],
      ),
    );
  }
}

class _NavItem extends StatelessWidget {
  const _NavItem({
    super.key,
    required this.isSelected,
    required this.label,
    required this.icon,
    required this.selectedIcon,
    required this.onTap,
    this.badge,
  });

  final bool isSelected;
  final String label;
  final Widget icon;
  final Widget selectedIcon;
  final void Function() onTap;
  final int? badge;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Stack(
        children: [
          Container(
            alignment: Alignment.center,
            color: Colors.white,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                if (isSelected) selectedIcon else icon,
                Text(
                  label,
                  style: TextStyle(
                    fontSize: 12.rpx,
                    color: isSelected ? Colors.blue : Colors.grey[700],
                  ),
                ),
              ],
            ),
          ),
          if (badge != null && badge! > 0)
            Positioned(
              top: 3.rpx,
              left: 50.rpx,
              child: Container(
                padding: EdgeInsets.fromLTRB(4, 0, 4, 0),
                decoration: BoxDecoration(
                  color: Color.fromRGBO(245, 65, 37, 1),
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(
                    color: Colors.white,
                    width: 0.5,
                  ),
                ),
                child: Text(
                  badge! < 100 ? badge.toString() : '99+',
                  style: TextStyle(
                    fontSize: 10.rpx,
                    color: Colors.white,
                  ),
                ),
              ),
            )
        ],
      ),
    );
  }
}
